<script lang="ts" setup>
	import {useUserStore} from '@/stores/user';
	import type {MsgItem} from '@/types/room';
	import dayjs from 'dayjs';

	defineProps<{
	  message: MsgItem
	}>()
	const formatTime = (time?: string) => {
	  return dayjs(time).format('HH:mm')
	}
	const store = useUserStore()
</script>

<template>
	<!-- 文字/图片消息 -->
	<view class="message-item" :class="{ reverse: store.userInfo?.id === message.from }">
		<image class="room-avatar" :src="message.fromAvatar" />
		<view class="room-message">
			<view class="time">{{ formatTime(message.createTime) }}</view>
			<view class="text" v-if="message.msgType === 1">
				{{ message.msg?.content }}
			</view>
			<image v-else-if="message.msgType === 4" class="image" :src="message.msg?.picture?.url" mode="widthFix" />
		</view>
	</view>
</template>

<style lang="scss">
	.message-item {
	  display: flex;
	  align-self: flex-start;
	  margin-top: 60rpx;

	  .room-avatar {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	  }

	  .room-message {
	    margin-left: 20rpx;
	  }

	  .time {
	    font-size: 26rpx;
	    color: #979797;
	  }

	  .image {
	    max-width: 420rpx;
	    margin-top: 10rpx;
	  }

	  .text {
	    max-width: 420rpx;
	    line-height: 1.75;
	    padding: 30rpx 40rpx;
	    margin-top: 16rpx;
	    border-radius: 20rpx;
	    font-size: 30rpx;
	    color: #3c3e42;
	    background-color: #fff;
	    position: relative;

	    &::after {
	      content: '';
	      position: absolute;
	      top: 0;
	      left: -25rpx;
	      width: 26rpx;
	      height: 52rpx;
	      background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
	      background-size: contain;
	    }
	  }

	  &.reverse {
	    flex-direction: row-reverse;
	    align-self: flex-end;

	    .room-message {
	      margin-left: 0;
	      margin-right: 20rpx;
	    }

	    .time {
	      text-align: right;
	    }

	    .text {
	      background-color: #16c2a3;
	      color: #fff;

	      &::after {
	        left: auto;
	        right: -25rpx;
	        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
	      }
	    }
	  }
	}
</style>
